<!--
 * @Author: 孙文豪
 * @Description:
 * @Date: 2021-12-14 17:40:13
 * @LastEditTime: 2022-12-16 13:59:47
 * @LastEditors: 孙文豪
-->
<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <slot></slot>
  </transition>
</template>
<script>
export default {
  name: "SwhTransitionHeight",
  props: {
    time: {
      //过渡时间可自定义
      type: String,
      default: "0.3s",
    },
  },
  setup(props) {
    // 过渡值初始化
    const transitionStyle = props.time + " height ease-in-out";
    // 进入前 设置el元素的transition,高度0
    const beforeEnter = function (el) {
      el.style.transition = transitionStyle;
      el.style.height = 0;
    };
    // 进入中
    const enter = function (el) {
      // 获取元素显示的高度
      if (el.scrollHeight !== 0) {
        el.style.height = `${el.scrollHeight}px`;
      } else {
        //没有高度就不显示
        el.style.height = "";
      }
      el.style.overflow = "hidden";
    };
    // 进入结束
    const afterEnter = function (el) {
      // 清除过度样式
      // el.style.transition = ''
      el.style.height = "";
    };

    // 离开前
    const beforeLeave = function (el) {
      el.style.height = `${el.scrollHeight}px`;
      el.style.overflow = "hidden";
    };
    // 离开中
    const leave = function (el) {
      if (el.scrollHeight !== 0) {
        el.style.transition = transitionStyle;
        el.style.height = 0;
      }
    };
    // 离开结束
    const afterLeave = function (el) {
      el.style.transition = "";
      el.style.height = "";
    };
    return {
      beforeEnter,
      enter,
      afterEnter,
      beforeLeave,
      leave,
      afterLeave,
    };
  },
};
</script>
<style lang="less" scoped></style>
